<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			p{
		            width:300px;
		            height:300px;
		            background: red;
		        }
		        .fade-enter-active, .fade-leave-active{
		            transition: 1s all ease;
		        }
		        .fade-enter-active{
		            opacity:1;
		            width:300px;
		            height:300px;
		        }
		        .fade-leave-active{
		            opacity:0;
		            width:100px;
		            height:100px;
		        }
		
		        .fade-enter,.fade-leave{
		            opacity:0;
		            width:100px;
		            height:100px;
		        }
		</style>
	</head>
	<body>

		<div id="box">
			<input type="button" value="单击显示隐藏" @click="show=!show">

			<transition name="fade" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @before-leave="beforeLeave"
			 @leave="leave" @after-leave="afterLeave">
				<p v-show="show"></p>
			</transition>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			window.onload = function() {
				new Vue({
					el: '#box',
					data: {
						show: false
					},
					methods: {
						beforeEnter(el) {
							console.log('动画enter之前');
						},
						enter(el) {
							console.log('动画enter进入');
						},
						afterEnter(el) {
							console.log('动画进入之后');
						},
						beforeLeave() {
							console.log('动画leave之前');
						},
						leave() {
							console.log('动画leave');
						},
						afterLeave() {
							console.log('动画leave之后');
						}
					}
				});
			};
		</script>

	</body>
</html>
